.editor-media-modal {
	padding: 0;
}

.editor-media-modal.dialog.card {
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	max-width: none;

	@include breakpoint( ">660px" ) {
		top: 5%;
		bottom: 5%;
		left: 5%;
		right: 5%;
		width: 90%;
	}

	@include breakpoint( ">960px" ) {
		left: 12.5%;
		right: 12.5%;
		width: 75%;
	}
}

.editor-media-modal .dialog__content {
	position: static;
	color: $gray-dark;
	height: 100%;
}

.editor-media-modal .section-nav {
	z-index: z-index( '.dialog__backdrop', '.editor-media-modal .section-nav' );
	@include breakpoint( ">480px" ) {
		margin-bottom: 16px;
	}
}

.editor-media-modal .header-cake.card {
	@include breakpoint( "<660px" ) {
		margin-top: 0;
		justify-content: left;
	}
}

.editor-media-modal .header-cake__corner {
	@include breakpoint( "<660px" ) {
		flex: none;
	}
}

.editor-media-modal .media-library__content {
	position: static;
}

.editor-media-modal .media-library__list {
	padding: 0 16px;

	@include breakpoint( ">660px" ) {
		padding: 0 24px;
	}
}

.editor-media-modal .media-library__header {
	padding: 0 16px;

	@include breakpoint( ">660px" ) {
		padding: 0 24px;
	}
}

.editor-media-modal .media-library__header:not(.media-library__upload-url) {
	padding-top: 6px;
	padding-bottom: 6px;
}

.editor-media-modal .media-library__scale-toggle,
.editor-media-modal .media-library__scale-range.range {
	right: 16px;

	@include breakpoint( ">660px" ) {
		right: 24px;
	}
}

.editor-media-modal .media-library__content .no-results {
	padding: 0 24px 24px;
}

.editor-media-modal__content {
	display: flex;
	flex-direction: column;
	position: absolute;
		top: 52px;
		right: 0;
		bottom: 74px;
		left: 0;
	overflow-y: auto;

	&.editor-media-modal-gallery__content {
		margin-top: 16px;

		@include breakpoint( ">660px" ) {
			margin-top: 0;
		}
	}

	@include breakpoint( ">660px" ) {
		flex-direction: row;
		top: 74px;
		overflow-y: visible;
	}
}

.editor-media-modal .media-library__list {
	@extend .editor-media-modal__content;
	display: block;
	top: 105px;
	right: 0;
	left: 0;
	padding: 4px 16px;
	transform: translateZ( 0 );
	pointer-events: all;

	@include breakpoint( ">480px" ) {
		top: 131px;
	}

	@include breakpoint( ">660px" ) {
		padding-left: 24px;
		padding-right: 24px;
		overflow-y: auto;
		top: 122px;
	}
}

.editor-media-modal .notice {
	z-index: z-index( '.dialog__backdrop', '.editor-media-modal .notice' );

	@include breakpoint( ">660px" ) {
		margin-top: 16px;
	}
}

.editor-media-modal .media-library__upload-url-cancel {
	padding-right: 0;
	padding-left: 12px;
}

.editor-media-modal .empty-content {
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate( -50%, -50% );
	padding-top: 0;
	margin: 0;
	width: 100%;
}

.editor-media-modal .media-library__content .empty-content__illustration {
	width: 65vh;
	min-width: 300px;
	max-width: 37.5vw;
	margin: -5% 0;

	@media ( max-height: 470px ) {
		display: none;
	}

	@include breakpoint( ">660px" ) {
		@media ( max-height: 600px ) {
			display: none;
		}
	}
}

.editor-media-modal .media-library__list-item-figure {
	background-color: $gray-light;
	box-shadow: inset 0 0 0 1px lighten( $gray, 25% );
}

.editor-media-modal .media-library__list-item-file-name {
	&::after {
		@include long-content-fade( $color: $gray-light );
	}
}

.editor-media-modal__gallery-help {
	position: absolute;
		bottom: 8px;
		right: 22px;
}

.editor-media-modal__gallery-help-content {
	font-size: 15px;
	text-align: left;
}

.editor-media-modal__gallery-help-instruction {
	padding: 16px;
	max-width: 280px;
}

.editor-media-modal__gallery-help-icon {
	position: relative;
	display: block;
	width: 34px;
	height: 34px;
	float: left;
	margin: 4px 12px 12px 0;
	border-radius: 50%;
	background-color: lighten( $gray, 30% );
	color: $gray-dark;
}

.editor-media-modal__gallery-help-icon .gridicon {
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate( -50%, -50% );
}

.editor-media-modal__gallery-help-actions {
	overflow-y: hidden;
	padding: 8px 16px;
	border-top: 1px solid lighten( $gray, 30% );
}

.editor-media-modal__gallery-help-remember-dismiss {
	float: left;
	margin-top: 4px;
	font-size: 13px;
}

.editor-media-modal__gallery-help-remember-dismiss .form-checkbox {
	margin-top: 2px;
}

.editor-media-modal__gallery-help-actions .button {
	float: right;
}

.editor-media-modal__secondary-actions {
	float: left;
	display: flex;
	justify-content: center;
	height: 40px;
}

.editor-media-modal__secondary-actions .gridicon {
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate( -50%, -50% );
	fill: $gray-dark;

	&:hover {
		fill: $blue-light;
	}
}

.editor-media-modal__secondary-action {
	&.is-mobile {
		position: relative;
		min-width: 60px;
		transition: all 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 );
	}

	&.is-desktop {
		display: none;
	}

	@include breakpoint( ">660px" ) {
		&.is-mobile {
			display: none;
		}

		&.is-desktop {
			display: inline-block;
		}
	}
}

.editor-media-modal__secondary-action:not( .is-mobile ).editor-media-modal__delete {
	line-height: 1;
	color: $alert-red;

	&:hover {
		color: lighten( $alert-red, 10% );
	}

	&:disabled {
		cursor: default;
		cursor: not-allowed;
		color: lighten( $alert-red, 25% );
	}
}

.editor-media-modal__secondary-action.is-active {
	transform: rotate( 90deg );

	.gridicon,
	.gridicon:hover {
		fill: $blue-medium;
	}
}

.editor-media-modal .dialog__action-buttons {
	position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	margin: 0;
}

.editor-media-modal .dialog__action-buttons .button:first-of-type {
	margin-left: 0;
}

.editor-media-modal__back-to-library {
	.is-desktop {
		display: none;
	}

	@include breakpoint( ">660px" ) {
		.is-desktop {
			display: inherit;
		}

		.is-mobile {
			display: none;
		}
	}
}

.editor-media-modal__plan-storage {
	display: none;

	@include breakpoint( ">480px" ) {
		display: inline-block;
	}
}
